<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--引入layui  -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<!-- 引入jquery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入layui的js-->
<script type="text/javascript"src="layui/layui.js"></script>
<body>
<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">留言内容:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="content" name="content" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">是否回复：</label>
			<div class="layui-input-inline" style="width: 120px;">
				<select name="isAnswer" autocomplete="off" class="layui-input">
				    <option value=" ">请选择</option>
					<option value="1">已回复</option>
					<option value="0">未回复</option>
				</select>
				</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>

	<!-- 编辑的弹层DIV -->
<div id="editDIV" style="display: none; margin-top: 20px;">
	<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">留言内容:</label>
				<div class="layui-input-inline" style="width: 350px; float: left;">
				<input type="text" id="content" name="content" class="layui-input"  autocomplete="off" disabled="disabled" >
				<input type="hidden" id="id" name="id">	
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">回复内容:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="answer" name="answer" class="layui-input"  >
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
			<button class="layui-btn" lay-filter="editSubmitBtn" lay-submit="">修改</button>
			</div>
		</form>
	</div>
	
	
	<!--定义数据表格table  -->
<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon">&#x1007;</i>删除</a>
        {{# if (d.isAnswer == 0){}}
           <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit"><i class="layui-icon">&#xe642;</i>回复</a>	
        {{# } }}
		</script>
		
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll"><i class="layui-icon">&#xe1007;</i>批量删除</button>
  		</div>
		</script>
	<!-- 开关1（既能开也能关） -->
	<script type="text/html" id="switchBar">
		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isAnswer" lay-skin="switch" lay-text="已回复|未回复" {{d.isAnswer=="1" ? "checked":""}}>
	</script>
<script type="text/javascript">
  layui.use(['laydate','layer','form','table','tree'], function() {
	var laydate = layui.laydate	//日期组件
		,layer = layui.layer	//弹层组件
		,form = layui.form      //表单组件
		,tree=layui.tree       //树形组件
		,$= layui.jquery    	//jquery组件
		,table = layui.table;	//表格组件
		
		/*开始使用组件*/
		//使用表格组件,渲染表格,填充数据
	 	table.render({
			elem: '#proTable',			//展示数据的表格id
			url: 'AllMessage.do',//提交到后台的地址
			method:'get',          //请求方式
			even: true, 			//表格隔行变色
			page: true,				//开启分页	
			toolbar:'#toolbarDemo', //表格的工具栏
			title:'产品表',		//表格的名称
			cols: [
				[{
					field: 'ck',
					fixed: 'left',
					type: 'checkbox',
					width: 100
				},{
					field: 'id',	//跟实体类的属性对应
					align:'center', //对齐方式
					width: 80,	   //列的宽度
					title: 'ID',	//表头名称
					sort: true		//开启排序
				},{
					field: 'name',	
					width:  80, 
					title: '回复者'	
				},{
					field: 'content',	
					width: 100,
					title: '留言内容'	
	 	        },{
					field: 'createTime',	
					width: 100,
					title: '创建时间',
				},{
					field: 'phone',	
					width: 100,
					title: '手机号'	
				},{
					field: 'isAnswer',	
					width: 80,
					title: '是否回复',
					toolbar:'#switchBar'
	            }, {
	            	field: 'answer',	
					width: 80,
					title: '回复内容'	
				}, {
					field: 'answerTime',	
					width: 80,
					title: '回复时间'	
			    },{
					fixed : 'right',
					title : '操作',
					width: 150,
					toolbar :'#barDemo'
					}]
				]
			});
	 	/*
		条件查询
		*/
		form.on('submit(search)', function (data) {
		var field = data.field;		
		//执行重载
		table.reload('proTable', {
		    page: { curr: 1 }, 		
		    where: field			 
		});
		});
			//表格头部工具栏事件
	table.on('toolbar(filterTable)', function(obj){
			var event=obj.event;
		     if (event == 'delAll') {
				//批量删除

				//获取勾选的数据
				var checkStatus = table.checkStatus('proTable');//获取选中的数据
				var ids = [];
				for (var i = 0; i < checkStatus.data.length; i++) {
					ids.push(checkStatus.data[i].id);
				}
				if (ids.length == 0) {
					alert("请先勾选数据");
					return;
				}
				var idStr = ids.join(",");
				//使用Ajax发请求

	if (confirm("确定删除吗？")) {
					$.ajax({
						type : 'post',
						url : 'deleteMessages.do',
						data : {"ids" : idStr}, //请求参数			
						dataType : 'json', //返回数据的格式			
						success : function(res) {
							//弹出提示信息
							layer.alert(res.msg);
							//刷新
							table.reload('proTable', {
								page : {
									curr : 1
								}
							})
						},
						error : function() { //提交失败
							alert("系统异常！！")
						}
					});
				}
			};
		})
		//单个操作
		//表格数据里的事件监听
		table.on('tool(filterTable)', function(obj) {
			var data = obj.data;//获取当前行的数据
			var event = obj.event;
			if (event == "edit") {
				//编辑
				//清空上次表单内容
				$("#editForm")[0].reset();
				//把当前行的数据回显到弹层页面
				form.val("editForm", data)
				//打开弹层
				layer.open({
					type : 1, //页面层
					title : '您正在修改【' + data.id + '】信息',//弹层标题
					content : $("#editDIV"),//弹层内容
					area : [ '60%', '80%' ]
				});
			} else if (event == "delete") {
				if (confirm("确定删除吗？")) {
					$.ajax({
						type : 'post',
						url : 'deleteMessage.do',
						data : {
							"id" : data.id
						}, //请求参数			
						dataType : 'json', //返回数据的格式			
						success : function(res) {
							//弹出提示信息
							layer.alert(res.msg);
							//刷新表格
							table.reload('proTable', {
								page : {
									curr : 1
								}
							})
						},
						error : function() { //提交失败
							alert("系统异常！！")
						}
					});
				}
			}

		})

		//修改弹层监听提交
		form.on('submit(editSubmitBtn)', function(data) {
			$.ajax({
				type : 'post', //方式
				url : 'updateMessage.do', //地址    
				data : $("#editForm").serialize(), //参数 //serialize 序列化取出所有的值
				dataType : 'json',
				success : function(res) {
					layer.alert(res.msg, {
						icon : 6
					}, function() {
						//关闭弹层
						layer.closeAll();
						//刷新父级页面的表格
						table.reload('proTable', {
							page : {
								curr : 1
							}
						});
					});
				},
				error : function() { //提交失败
					alert("系统异常！！")
				}
			});
			return false;
		});
	// 处理开关：点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
	  form.on('switch(isAnswer)', function (data) {
		  var id = $(this).attr('data-id');			//获得当前点击对象的id值
		  var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		  var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		  layer.open({
			  content: '确定要修改状态吗？'				//给用户的友好提示
			  ,btn: ['确定', '取消']
			  ,yes: function(index, layero){
				  data.elem.checked=x;
				  layer.close(index);
				  $.ajax({
					  type : "POST",
					  url : "updateisAnswer.do",
					  data : {"id" : id , "valid" : valid},
					  success : function(res) {
						  if(res){
							  layer.msg("修改成功！");
						  }else{
							  layer.msg("修改失败！");
						  }
						  form.render();
					  },
					  error : function() {
					  }
				  });
			  }
			  ,btn2: function(index, layero){
				  //按钮【按钮二】的回调
				  data.elem.checked=!x;
				  form.render();
				  layer.close(index);
				  //return false 开启该代码可禁止点击该按钮关闭
			  }
			  ,cancel: function(){
				  //右上角关闭回调
				  data.elem.checked=!x;
				  form.render();
				  //return false 开启该代码可禁止点击该按钮关闭
			  }
		  });
		  form.render();
		  return false;
	  });
	});
</script>
</body>
</html>